<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* position: ; */
    </style>
</head>
<body>
    <div class="box">1111111</div>
    <div id="test">22222222下面克隆的</div>
</body>
</html>
<Script>
  //摘自 犀牛书上...

    /*通过脚本控制html文档 展示？
        如何选订特定的html元素 
        如何geihtml元素设置属性 
        如何修改元素的内容 
        如何给文档添加新节点 */
    /*案例展示如何查找和修改文档的内容*/
    /*如果dom中不存在这样一个区域 则创建一个*/
        //如果这个元素不存在 则创建一个
        // if(!log){
            log =document.createElement("div");      //创建一个新的div元素 
            log.id = "cdd";                          //给元素div 一个id属性 cdd
            log.innerHTML = "<h1>常东东</h1>"        //定义初始样式   
            document.body.appendChild(log);          //将其插入到文档的末尾
        // }

    // 获取操作 
    let $ = document.querySelector.bind(document);
    let oDiv = $(".box");
    oDiv.style.color = "red"
    if(){
        
    }

   
    // dom中所有的 div元素 
    // document.all.tags("div")  //文档中所有的div元素  

    
    //*创建元素 
    var elem = document.createElement("div");
    elem.id = "test";
    elem.style = "color:red";
    elem.innerHTML = "我是新的创建的节点";
    document.body.appendChild(elem);     
    /*
      parent.appendChild(child);将child追加到parent的子节点的最后面 
    */   
    /*通过createElement创建的元素并不属于dom对象 它只是创建出来的 比为添加到文档中 
      得调用appendChild && insertBefore等方法添加到HTMlL 中.
    */    
    //insertBefore(要插入的节点 原有的节点)在指定的位置(原有节点之前) 插入节点 


    //*创建文本节点 
    var node = document.createTextNode("我是文本节点");
    document.body.appendChild(node)        


    //*cloneNode
    /*克隆一个节点 node.cloneNode(true/false) 接受一个布尔的参数 用来表示是否复制子元素
      克隆节点不会克隆事件 除非事件是通过<div onclick="test()"></div> 这种方式绑定的 用addEventListerer和node.click=XXXX; 方式绑定的都不会复制 
    */         
    var from =document.getElementById("test");
    var clone = from.cloneNode(true);
    document.body.appendChild(clone);       


    //元素属性api   属性操作 
    //setAttribute 给元素设定属性   
    element.setAttribute(name,value);
    //其中name是特性名 value是特性值 如果元素不包含该属性 则会创建该属性并赋值
    
    
    //getAttribute 返回指定的特性名 相应的特性值 如果不存在 则返回null 
    //getAtteibute() 是一个函数 只要一个参数 即你打算查询的属性的名字   
    //注意 这个方法不属于 document对象 不能通过document调用   
    var value = element.getAtteibute("id");      
    //获取 设置属性 
    var c = el.getAtteibute("class");
    el.setAttribute("class","add");        
    //判断移除属性 
    el.hasAttribute("class");
    el.removeAtteibute("class");
    //是否右属性设置 
    el.hasAttribute(); 


    //样式相关的api 
    //直接修改元素样式  
    elem.style.color = "red";
    elem.style.setProperty("font-size","16px");
    elem.style.removeProperty("color");        


    /*if (aXXX== 1) {   
                addClass(document.getElementById('s1'), 'active');
                removeClass(document.getElementById('s2'), 'active');
                document.getElementById('goodsDetail').style.display = "";
                document.getElementById('userRating').style.display = "none"; */


    //获取和设置属性  
   
    //childNodes 属性 
    // 一个dom树上 childNodes属性可以用来 获取任何一个 元素的所以子集 一个包含这个元素全部所以的子集的数组  
    //   打印body下的元素的字元素的总个数 数字大的吃惊 因为并非只有元素节点 1
    
      

      
</Script>
